<template>
	<div class="aside">
		<el-row>
			<el-col>
				<div class="video-logo">
					<span class="logo-title">
						<i class="el-icon-s-home"></i>
						<span v-show="!isCollapse">CHARLES-VIDEO</span>
					</span>
				</div>
				<el-menu :default-active="defaultActive" class="el-menu-nav-aside" :collapse-transition="false"
					background-color="#304156" text-color="#E7EAF3" :collapse="isCollapse" active-text-color="#4091FF"
					router="true">
					<el-menu-item index="dashboard">
						<i class="el-icon-s-data" v-show="isCollapse"></i>
						<template class="aside-font" slot="title">
							<i class="el-icon-s-data"></i>
							<span slot="title">数据统计</span>
						</template>
					</el-menu-item>

					<el-submenu index="1">
						<template class="aside-font" slot="title">
							<i class="el-icon-menu"></i>
							<span slot="title">客服审核管理</span>
						</template>

						<el-menu-item-group>
							<el-menu-item class="aside-child-font" index="operMember">
								<i class="el-icon-s-custom"></i>
								成员列表
							</el-menu-item>
							<el-menu-item class="aside-child-font" index="operLog">
								<i class="el-icon-notebook-1"></i>
								日志管理
							</el-menu-item>
						</el-menu-item-group>

					</el-submenu>

					<el-submenu index="2">
						<template class="aside-font" slot="title">
							<i class="el-icon-menu"></i>
							<span slot="title">视频平台管理</span>
						</template>

						<el-menu-item-group>
							<el-menu-item class="aside-child-font" index="operUser">
								<i class="el-icon-setting"></i>
								用户列表
							</el-menu-item>

							<el-menu-item class="aside-child-font" index="operVideo">
								<i class="el-icon-setting"></i>
								视频列表
							</el-menu-item>

							<el-menu-item class="aside-child-font" index="operBanner">
								<i class="el-icon-setting"></i>
								轮播图列表
							</el-menu-item>

							<el-menu-item class="aside-child-font" index="operComments">
								<i class="el-icon-s-comment"></i>
								评论列表
							</el-menu-item>

							<el-menu-item class="aside-child-font" index="operMenu">
								<i class="el-icon-setting"></i>
								菜单列表
							</el-menu-item>

							<el-menu-item class="aside-child-font" index="operLabel">
								<i class="el-icon-setting"></i>
								标签列表
							</el-menu-item>

							<el-menu-item class="aside-child-font" index="apiLog">
								<i class="el-icon-notebook-1"></i>
								接口访问记录
							</el-menu-item>

							<el-menu-item class="aside-child-font" index="videoLog">
								<i class="el-icon-notebook-1"></i>
								平台访问日志
							</el-menu-item>
						</el-menu-item-group>

					</el-submenu>
				</el-menu>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
	name: 'Aside',
	props: ['isCollapse'],

	data() {
		return {
			defaultActive: 'dashboard',
			asideWidth: "220px",
		}
	},

	created() {
		this.defaultActive = this.$route.path.split('/')[1];
	},

	watch: {
		isCollapse(val) {
			if (val) {
				this.asideWidth = "60px"
				document.getElementsByClassName("el-menu-nav-aside")[0].style.width = "60px"
				// 不设定时器的话，会导致这个class不存在。因为在收起侧边栏时才生成的这个元素
				setTimeout(() => {
					document.getElementsByClassName("el-menu-nav-aside el-menu--collapse el-menu")[0].style.width = "60px"
				}, 100)
			} else {
				this.asideWidth = "200px"
				document.getElementsByClassName("el-menu-nav-aside")[0].style.width = "200px"
				document.getElementsByClassName("el-menu-nav-aside el-menu--collapse el-menu")[0].style.width = "200px"
			}
		},

		'$route': function () {
			if (this.asideWidth === '60px') {
				setTimeout(() => {
					document.getElementsByClassName("el-menu-nav-aside el-menu--collapse el-menu")[0].style.width = "60px"
				}, 100)
			}
		}
	}
}
</script>

<style lang="scss">
i {
	margin-right: 10px;
}

.aside {
	height: 100%;
	background-color: #304156;
	border-right: 0 !important;
}

.el-menu {
	border-right: 0;
}

.video-logo {
	width: 200px;
	height: 60px;
	background-color: #0665d0 !important;
}

.logo-title {
	width: 200px;
	height: 60px;
	padding-left: 25px;
	color: hsla(0, 0%, 100%, .75) !important;
	font-size: 17px;
	line-height: 60px;
}

.logo-title:hover {
	cursor: pointer;
}

.aside-font {
	font-size: 14px;
	font-weight: 200;
	letter-spacing: 3px;
}

.aside-child-font {
	font-weight: 100;
	letter-spacing: 3px;
}
</style>
